<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getPurchaseDatailAPI } from '@/apis/purchase'

let route = useRoute()
let id = route.params.id

const purchase = ref({})
let phone = ''
let time = ''
let imgNum = 0

onMounted(async () => {
    const res = await getPurchaseDatailAPI(id)
    if (res.code === 2000) {
        purchase.value = res.data
        let user = purchase.value.user
        phone = user.slice(user.indexOf('_') + 1)
        let publishTime = purchase.value.publishTime
        time = publishTime.split(' ')[0]
        imgNum = Math.floor(Math.random() * (5 - 1)) + 1
    }
})
</script>

<template>
<div class="purchase-page">
    <div class="title">{{ purchase.name }}</div>
    <div class="content">
        <div class="content-l"><img :src="`http://82.157.143.242:9000/rongxiaotong/${imgNum}.jpg`" alt=""></div>
        <div class="info-box">
            <div class="info-item">
                <div class="label">描述：</div>
                <div class="text">{{ purchase.comment }}</div>
            </div>
            <div class="info-item">
                <div class="label">采购量：</div>
                <div class="text">{{ purchase.amount }} {{ purchase.unit }}</div>
            </div>
            <div class="info-item">
                <div class="label">期望来源地：</div>
                <div class="text">{{ purchase.origin }}</div>
            </div>
            <div class="info-item">
                <div class="label">买家姓名：</div>
                <div class="text">{{ purchase.user }}</div>
            </div>
            <div class="info-item">
                <div class="label">买家地址：</div>
                <div class="text">{{ purchase.address }}</div>
            </div>
            <div class="info-item">
                <div class="label">联系电话：</div>
                <div class="text">{{ phone }}</div>
            </div>
            <div class="info-item">
                <div class="label">发布时间：</div>
                <div class="text">{{ time }}</div>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
.purchase-page {
    width: 1280px;
    margin: 20px auto;
    padding: 20px 140px;
    background-color: #fff;

    .title {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #bababa;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .content {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 300px;
        padding: 20px 0;
        margin: 20px 0;

        $boxW: 260px;
        .content-l {
            width: $boxW;
            height: $boxW;

            img {
                width: $boxW;
                height: $boxW;
            }
        }

        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 440px;
            padding-left: 40px;
            

            .info-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                .label {
                    width: 100px;
                    height: 30px;
                    color: #999;
                }

                .text {
                    width: 300px;
                }
            }
        }
    }
}
</style>
